<template>
  <div class="activity-details-container">
    <div class="admin-view">
      <h2 class="title">
        {{ activityDetails.activityTitle || "活动标题未填写" }}
      </h2>
      <!-- 信息区域 -->
      <div class="info">
        <div class="info-left">
          <div class="info-item">
            <span class="label">活动编号:</span>
            <span class="value">{{
              activityDetails.activityId || "未填写"
            }}</span>
          </div>
          <div class="info-item">
            <span class="label">所属社团:</span>
            <span class="value">{{
              activityDetails.clubVO.clubName || "社团名称未填写"
            }}</span>
          </div>
          <div class="info-item">
            <span class="label">社团编号:</span>
            <span class="value">{{
              activityDetails.clubVO.clubId || "未填写"
            }}</span>
          </div>
        </div>
        <div class="info-right">
          <div class="info-item">
            <span class="label" style="margin-right: 10px">活动状态:</span>
            <el-tag>
              {{ activityDetails.status }}
            </el-tag>
          </div>
          <div class="info-item">
            <span class="label">开始时间 - 结束时间:</span>
            <span class="value">
              {{ activityDetails.startTime || "未填写" }} -
              {{ activityDetails.endTime || "未填写" }}
            </span>
          </div>
        </div>
      </div>
      <!-- 正文内容 -->
      <div class="content">
        {{ activityDetails.activityContent || "活动内容未填写" }}
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { useRoute } from "vue-router";
import { ActivityControllerService } from "../../../../generated";
import { ElMessage } from "element-plus";

const route = useRoute();
const activityIdStr = Number(route.query.activityId);
const activityId = Number(activityIdStr);

const activityDetails = ref({
  activityId: "",
  activityTitle: "",
  activityContent: "",
  startTime: "",
  endTime: "",
  status: 0,
  clubVO: {
    clubId: "",
    clubName: "",
  },
});

const loadActivityDetails = async () => {
  try {
    const response =
      await ActivityControllerService.getActivityVoById(activityId);
    if (response.code === 0 && response.data) {
      activityDetails.value = response.data;
      activityDetails.value.activityId = response.data.id;
      activityDetails.value.clubVO.clubId = response.data.clubVO?.id;
    } else {
      console.error(
        "加载活动详情失败:",
        response.message || "返回数据格式错误",
      );
      ElMessage.error(response.message || "加载活动详情失败，请稍后重试");
    }
  } catch (error) {
    console.error("加载活动详情时发生错误:", error.message || error);
    ElMessage.error("系统错误，请稍后重试");
  }
};

onMounted(() => {
  loadActivityDetails();
  console.log("activityId:", activityId);
});
</script>

<style scoped>
.activity-details-container {
  padding: 20px;
}

.admin-view {
  width: 100%;
  height: 100%;
}

.title {
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 20px;
}

.info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.info-left,
.info-right {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.info-item {
  display: flex;
  align-items: center;
}

.label {
  font-weight: bold;
  color: #5c6bc0;
  margin-right: 5px;
}

.value {
  color: #333;
}

.content {
  padding: 15px;
  border-radius: 4px;
  border: 1px solid #ddd;
  margin-bottom: 20px;
  color: #333;
  height: calc(100% - 200px);
  overflow-y: auto;
}
</style>
